import cn from 'classnames';
import React from 'react';
import s from './style.module.css';
import PropTypes from 'prop-types';
import Icon from './icon';
import Tooltip from '@kuiper-components/tooltip';
import fetch from 'API/fetch';
import { cloneDeep } from 'lodash';
import { datetime } from '../../../common/formatter';
// import CopyBoard from '../CopyBoard';
import VulMonitorSetting from '../TaskSettingsViewer/VulMonitorSettings';
import SecurityEvent from '../TaskSettingsViewer/SecurityEvent';
import TaskSettingsViewer from '../TaskSettingsViewer';
import AviliableViewer from '../TaskSettingsViewer/Aviliable';
import AssetSettings from '../TaskSettingsViewer/Asset';
import DownOnce from '../DownOnce';
import { Spin } from 'antd';

// TODO:下载
const Obj = {
	vul: {
		资产地址: 'targetUrl',
		监测配置: 'config',
		监测耗时: 'usedTime',
		响应IP: 'targetIp',
		防御信息: 'wafInfo',
		监测完成时间: 'endTime',
		已扫描URL数: 'urlCount',
	},
	ssl: {
		资产地址: 'targetUrl',
		监测配置: 'config',
		监测耗时: 'usedTime',
		防御信息: 'wafInfo',
		监测完成时间: 'endTime',
	},
	securityEvent: {
		资产地址: 'targetUrl',
		监测配置: 'config',
		监测耗时: 'usedTime',
		响应IP: 'targetIp',
		防御信息: 'wafInfo',
		监测完成时间: 'endTime',
		已扫描URL数: 'urlCount',
	},
	aviliable: {
		资产地址: 'targetUrl',
		监测完成时间: 'endTime',
		监测配置: 'config',
	},
	asset: {
		资产地址: 'targetUrl',
		监测配置: 'config',
		监测耗时: 'usedTime',
		监测完成时间: 'endTime',
	},
	content: {
		资产地址: 'targetUrl',
		监测配置: 'config',
		监测耗时: 'usedTime',
		响应IP: 'targetIp',
		防御信息: 'wafInfo',
		监测完成时间: 'endTime',
	},
};
export default function DetailHead({ type, taskId, taskName }) {
	const [info, setInfo] = React.useState({});
	const [noteObj, setNoteObj] = React.useState({});
	const [name, setName] = React.useState('');
	const [isLoading, setIsLoading] = React.useState(true);

	const changeObj = res_ => {
		const noteObj_ = cloneDeep(Obj[type]);
		Object.entries(noteObj_).map(([key, value]) => {
			noteObj_[key] = res_[value];
		});
		return noteObj_;
	};
	const getData = async () => {
		setIsLoading(true);
		const res = await fetch(`/api/v2/tasks/overview?task_id=${taskId}`, {
			method: 'GET',
		});
		if (res.status === 'success') {
			const res_ = cloneDeep(res.results);
			const unit = ['天', '小时', '分钟', '秒'];
			let usedTime = '';
			res_.usedTime.forEach((el, i) => {
				if (el) {
					usedTime += el + unit[i];
				}
			});
			res_.usedTime = usedTime;
			res_.endTime = datetime(res_.endTime);
			res_.urlCount === '暂无' && (res_.urlCount = 0);
			const noteObj_ = changeObj(res_);
			setNoteObj(noteObj_);
			setInfo(res_);
			setIsLoading(false);
		}
	};
	const showConfig = () => {
		console.log('[  ]-107', type, info);
		if (info.note && type) {
			switch (type) {
				case 'vul':
				case 'ssl':
					return (
						// vul_ssl
						<VulMonitorSetting
							isLatestTask={true}
							taskType={type}
							host={info.targetUrl}
							triggerType={info?.triggerType}
							taskSettings={info?.taskSettings}
							note={info?.note || ''}
							jobId={info.jobId}
							alertSettings={info?.alertSettings || {}}
						>
							查看
						</VulMonitorSetting>
					);
				case 'asset':
					return (
						<AssetSettings // asset
							isLatestTask
							showGoToSettings={
								info?.triggerType === undefined ||
								info?.triggerType === 'schedule' ||
								info?.triggerType === 'scheduleIncrement'
							}
							target={info.targetUrl}
							taskType={type}
							triggerType={info?.triggerType}
							taskSettings={info?.taskSettings}
							jobId={info.jobId}
							note={info?.note || ''}
							alertSettings={info?.alertSettings || {}}
						>
							查看
						</AssetSettings>
					);
				case 'securityEvent':
					return (
						<SecurityEvent // securityEvent
							isLatestTask={true}
							host={info.targetUrl}
							taskType={type}
							triggerType={info?.triggerType}
							taskSettings={info?.taskSettings}
							jobId={info.jobId}
							note={info?.note || ''}
							alertSettings={info?.alertSettings || {}}
						>
							查看
						</SecurityEvent>
					);
				case 'aviliable':
					return (
						<AviliableViewer
							isLatestTask
							host={info.targetUrl}
							taskType={info.taskType}
							triggerType={info?.triggerType}
							taskSettings={info?.taskSettings}
							jobId={info.jobId}
							note={info?.note || ''}
							name={taskName}
							alertSettings={info?.alertSettings || {}}
						>
							查看
						</AviliableViewer>
					);
				case 'content':
					return (
						<TaskSettingsViewer // content
							isLatestTask
							host={info.targetUrl}
							taskType={type}
							triggerType={info?.triggerType}
							taskSettings={info?.taskSettings}
							jobId={info.jobId}
							note={info?.note || ''}
							alertSettings={info?.alertSettings || {}}
						>
							查看
						</TaskSettingsViewer>
					);
				default:
					return null;
			}
		}
	};
	React.useMemo(() => {
		if ('vul_ssl_securityEvent_asset_content'.includes(type)) {
			setName('note');
		} else {
			setName('task');
		}
		getData();
	}, [taskId, type]);

	return (
		<div className={s.box}>
			{type !== 'aviliable' && (
				<div className={s.down}>
					<Icon name={'down'} />
					<DownOnce
						className={s.linkBtn}
						record={{ _id: info.id, note: info.note, target: info.targetUrl }}
					/>
				</div>
			)}
			<Spin spinning={isLoading}>
				{type && (
					<div className={s.head}>
						<Icon name={name} />
						<span>
							{name === 'note' ? '资产名称：' : '任务名称：'}
							{taskName || info.note}
						</span>
					</div>
				)}
				<div className={s.content}>
					{Object.entries(noteObj).map(([key, value], i) => {
						if (key === '监测配置') {
							return (
								<span key={key} className={s['conSpan' + i]}>
									{key}：{showConfig()}
								</span>
							);
						} else if (key === '资产地址') {
							return (
								<span key={key} className={s['conSpan' + i]}>
									{key}：
									<Tooltip placement="top" overlay={value}>
										<span>{value}</span>
									</Tooltip>
									{/* <span>
									<CopyBoard className={s.affect} text={value} />
								</span> */}
								</span>
							);
						} else {
							return (
								<span key={key} className={s['conSpan' + i]}>
									{key}：<span>{value}</span>
								</span>
							);
						}
					})}
				</div>
			</Spin>
		</div>
	);
}
DetailHead.propTypes = {
	taskName: PropTypes.string,
	taskId: PropTypes.string,
	type: PropTypes.string,
};
